<!DOCTYPE HTML>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>资源详情</title>
    <link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css'/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Custom Theme files -->
    <link th:href="@{/css/style.css}" rel='stylesheet' type='text/css'/>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--webfont-->
    <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/login.js}"></script>
    <script th:src="@{/js/laydate/laydate.js}"></script>
    <style>
        .single-bottom button {
            border: none;
            font-size: 1.1em;
            width: 13%;
            margin: 0.5em 0em;
            background: #F19E1F;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            color: #fff;
            padding: 0.5em 1em;
            outline: none;
        }

        .single-bottom input[type="password"] {
            font-size: 1em;
            width: 98%;
            padding: 0.5em 1em;
            margin: 0.5em 0;
            background: #fff;
            outline: none;
            border: 1px solid #bbb;
            color: #bbb;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="col-sm-8 header-left">
        <div class="logo">
            <a th:href="@{/}"><img th:src="@{/images/logo.png}" alt=""/></a>
        </div>
        <div class="menu">
            <a class="toggleMenu" href="javascript:void(0);"><img th:src="@{/images/nav.png}" alt=""/></a>
            <ul class="nav" id="nav">
                <li><a href="/source">旅游资源</a></li>
                <li><a href="/service">服务设施</a></li>
                <li><a href="/shop">购物信息</a></li>
                <li>
                    <a th:if="${session.user == null}" href="/tologin">登录</a>
                    <a th:if="${session.user != null}" href="/order">我的预定</a>
                </li>
                <li>
                    <a th:if="${session.user == null}" href="/toregist">注册</a>
                    <a th:if="${session.user != null}" th:href="@{/logout}">退出</a>
                </li>
                <div class="clearfix"></div>
            </ul>
            <script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
        </div>
    </div>
    <div class="col-sm-4 header_right">
        <div id="loginContainer">
            <a href="javascript:void(0);" id="loginButton">
                <img th:src="@{/images/login.png}">
                <a th:if="${session.user == null}" th:href="@{/tologin}" style="font-size: 14px;color: #ffffff">未登录</a>
                <span th:if="${session.user != null}" th:text="${session.user.u_name}">未登录</span>
            </a>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<!--single start here-->
<div class="single">
    <div class="container">
        <div class="col-md-8 sing">
            <div class=" single-grid">
                <div class="lone-line" th:if="${category eq 'source'}">
                    <img class="img-responsive" th:src="${info.so_image_pre}" style="width: 800px;height: 400px" alt="">
                    <h2 th:text="${info.so_name}">Social Sense Perception of Loneliness</h2>
                    <div class="cal">
                        <ul>
                            <li><span><i class="glyphicon glyphicon-phone-alt"> </i><span th:text="${info.so_phone}">010-00544</span></span>
                            </li>
                            <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-home"> </i><span
                                    th:text="${info.so_area}">中国</span></a></li>
                        </ul>
                        <ul>
                            <li><span><i class="glyphicon glyphicon-map-marker"> </i><span th:text="${info.so_address}">中国河南</span></span>
                            </li>
                        </ul>
                        <ul>
                            <li><span><i class="glyphicon glyphicon-bookmark"> </i><span th:text="${info.so_des_pre}">中国河南好风景</span></span>
                            </li>
                        </ul>
                    </div>
                    <p><span th:text="${info.so_des}">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis
                        unde omnis iste natus error.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis
                        unde omnis iste natus error.</span>
                    </p>
                </div>
                <div class="lone-line" th:if="${category eq 'service'}">
                    <img class="img-responsive" th:src="${info.se_image_pre}" style="width: 800px;height: 400px" alt="">
                    <h2 th:text="${info.se_name}">Social Sense Perception of Loneliness</h2>
                    <div class="cal">
                        <ul>
                            <li><span><i class="glyphicon glyphicon-phone-alt"> </i><span th:text="${info.se_phone}">010-00544</span></span>
                            </li>
                            <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-home"> </i><span
                                    th:text="${info.se_area}">中国</span></a></li>
                        </ul>
                        <ul style="margin-top: 15px">
                            <li><span><i class="glyphicon glyphicon-map-marker"> </i><span th:text="${info.se_address}">中国河南</span></span>
                            </li>
                            <li><span><i class="glyphicon glyphicon-bookmark"> </i><span th:text="${info.se_des_pre}">中国河南好风景</span></span>
                            </li>
                        </ul>
                        <ul style="margin-top: 15px">
                            <li>
                                <span><i class="glyphicon glyphicon-globe"> </i>
                                    <span th:text="${info.routes}" th:if="${not #lists.isEmpty(info.routes)}">坐地铁就到了。</span>
                                    <span th:if="${#lists.isEmpty(info.routes)}">坐地铁就到了。</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <p><span th:text="${info.se_des}">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis
                        unde omnis iste natus error.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis
                        unde omnis iste natus error.</span>
                    </p>
                    <div th:if="${session.user != null && info.se_cate == 2}">
                        <div class="single-bottom" style="width: 600px;">
                            <form action="/book" method="post" onsubmit="return checkForm();">
                                <div class="col-md-12">
                                    <input type="hidden" name="o_se_id" th:value="${info.se_id}"/>
                                    <span style="color: #7b3000">请选择预定日期：</span>
                                    <input id="o_time" name="o_time" type="text" placeholder="请选择预定日期范围"/>
                                </div>
                                <button type="submit" style="margin-left: 100px">预 定</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="lone-line" th:if="${category eq 'shop'}">
                    <img class="img-responsive" th:src="${info.sh_image_pre}" style="width: 800px;height: 400px" alt="">
                    <h2 th:text="${info.sh_name}">Social Sense Perception of Loneliness</h2>
                    <div class="cal">
                        <ul>
                            <li><span><i class="glyphicon glyphicon-phone-alt"> </i><span th:text="${info.sh_phone}">010-00544</span></span>
                            </li>
                            <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-home"> </i>
                                <span th:text="${info.sh_area}">中国</span></a></li>
                        </ul>
                        <ul style="margin-top: 15px">
                            <li><span><i class="glyphicon glyphicon-map-marker"> </i><span th:text="${info.sh_address}">中国河南</span></span>
                            </li>
                            <li><span><i class="glyphicon glyphicon-bookmark"> </i><span th:text="${info.sh_des_pre}">中国河南好风景</span></span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <span><i class="glyphicon glyphicon-globe"> </i>
                                    <span th:text="${info.routes}" th:if="${not #lists.isEmpty(info.routes)}">坐地铁就到了。</span>
                                    <span th:if="${#lists.isEmpty(info.routes)}">坐地铁就到了。</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <p><span th:text="${info.sh_des}">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis
                        unde omnis iste natus error.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis
                        unde omnis iste natus error.</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-3 categories-grid">
            <div class="grid-categories">
                <h4>印象标签</h4>
                <ul class="popular ">
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>中国好风景,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>中国好风景,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>中国好风景,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>中国好风景,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>中国好风景,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>中国好风景,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>中国好风景,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>中国好风景,中国好风景</a></li>
                </ul>
            </div>
            <div class="grid-categories">
                <h4>用户评价</h4>
                <ul class="popular popular-in">
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>最美信商,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>最美信商,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>最美信商,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>最美信商,中国好风景</a></li>
                    <li><a href="javascript:void(0);"><i class="glyphicon glyphicon-ok"> </i>最美信商,中国好风景</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<div th:include="footer :: th_footer"></div>
<script>
    //日期范围
    laydate.render({
        elem: '#o_time'
        , range: true
    });

    function checkForm() {
        var o_time = $("#o_time").val();
        if (o_time.trim() != null) {
            return true;
        } else {
            return false;
        }
    }
</script>
</body>
</html>		